<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { deviceApi as MainApi, deviceById as MainById } from '@T2/service/api.ts';
import { useCurrentWatchStore } from '@T2/store/users.ts';
import UploadAttachment from '@T2/components/uploadAttachment/index.vue';

const currentWatchStore = useCurrentWatchStore();
const { curProject } = currentWatchStore;

const { type, content, unit } = defineProps({
  type: {
    type: String,
    validator(value) {
      return ['新增', '编辑'].includes(value);
    },
    required: true,
  },
  unit: {
    type: Number,
    required: true,
  },
  content: {
    type: [Object, null],
    required: true,
  },
});
const emits = defineEmits(['close']);
const visible = ref(true);

onMounted(() => {
  init();
});

const MainForm = reactive({
  model: {},
  files_json: [],
  files_updateTimes: 0,
});
const init = () => {
  if (type === '编辑') {
    MainForm.model = content;
    MainForm.files_json = content.files_json || [];
    MainForm.files_updateTimes++;
  } else {
    MainForm.model = {};
    MainForm.files_json = [];
    MainForm.files_updateTimes++;
  }
}
const filesChange = (files) => {
  MainForm.model.files = files;
}
const handleMainSubmit = () => {
  if (!MainForm.model.code) {
    ElMessage.error('请输入设备位号！');
    return;
  } else if (!MainForm.model.name) {
    ElMessage.error('请输入设备名称！');
    return;
  }
  if (type === '新增') {
    AddMain();
  } else if (type === '编辑') {
    EditMain();
  }
}
const AddMain = () => {
  MainApi({
    method: 'post',
    data: {
      ...MainForm.model,
      unit: unit,
      project: curProject.id,
    }
  }).then(res => {
    ElMessage.success('新增成功');
    emits('close', true);
  });
}
const EditMain = () => {
  MainById({
    method: 'patch',
    id: MainForm.model.id,
    data: {
      ...MainForm.model,
    }
  }).then(res => {
    ElMessage.success('编辑成功');
    emits('close', true);
  });
}

const closeClick = () => {
  emits('close', false);
}
</script>

<template>
  <div>
    <el-drawer v-model="visible" size="980" @close="closeClick()">
      <template #header>
        <div class="head-name">{{ type }}</div>
      </template>
      <template #default>
        <div class="content-box flex-column">
          <label class="box-header first">基本信息</label>
          <div class="grid-box">
            <div class="grid-item">
              <label class="required">设备位号：</label>
              <el-input v-model="MainForm.model.code" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label class="required">设备名称：</label>
              <el-input v-model="MainForm.model.name" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>安装位置：</label>
              <el-input v-model="MainForm.model.addr" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>投运日期：</label>
              <el-input v-model="MainForm.model.use_time" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>维保周期：</label>
              <el-input v-model="MainForm.model.cycle" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>产品名称：</label>
              <el-input v-model="MainForm.model.product_name" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>规格型号：</label>
              <el-input v-model="MainForm.model.product_gg" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>品牌：</label>
              <el-input v-model="MainForm.model.brand" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item span3">
              <label>备注：</label>
              <el-input type="textarea" :rows="4" v-model="MainForm.model.remark" placeholder="请输入内容"></el-input>
            </div>
            <div class="grid-item flex span2">
              <label>产品资料：</label>
              <UploadAttachment
                :fj_json="MainForm.files_json"
                :updateTimes="MainForm.files_updateTimes"
                :maxSizeMB="20"
                @files-change="filesChange"
              >
                <div class="upload_info">请上传JPG/PNG/格式文件，不超过20MB</div>
              </UploadAttachment>
            </div>
          </div>
          
          <label class="box-header">供应商信息</label>
          <div class="grid-box">
            <div class="grid-item">
              <label>厂商名称：</label>
              <el-input v-model="MainForm.model.supplier_name" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>联系人：</label>
              <el-input v-model="MainForm.model.supplier_people" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item">
              <label>联系电话：</label>
              <el-input v-model="MainForm.model.supplier_phone" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item span2">
              <label>地址：</label>
              <el-input v-model="MainForm.model.supplier_addr" placeholder="请输入"></el-input>
            </div>
            <div class="grid-item span3">
              <label>说明：</label>
              <el-input type="textarea" :rows="4" v-model="MainForm.model.supplier_info" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="closeClick()">取 消</el-button>
          <el-button type="primary" @click="handleMainSubmit()">保 存</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.box-header {
  font-weight: 500;
  font-size: 16px;
  color: #4C4C4C;
  margin-top: 40px;
  margin-bottom: 24px;
  &.first {
    margin-top: 0;
  }
}
.grid-box {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  .grid-item {
    font-weight: 400;
    font-size: 14px;
    color: #111111;
    label {
      white-space: nowrap;
      color: #666666;
      &.required {
        position: relative;
        &::before {
          content: '*';
          position: absolute;
          left: -6px;
          top: 0;
          color: #ff0000;
        }
      }
    }
  }
  .span2 {
    grid-column: span 2;
  }
  .span3 {
    grid-column: span 3;
  }
}
.upload_info {
  white-space: nowrap;
  font-size: 12px;
  color: #999999;
  line-height: 16px;
}
</style>

<style scoped>
:deep(.el-drawer__body) {
  padding: 16px 24px;
}
:deep(.el-drawer__header) {
  height: 60px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid #EDEFF3;
}
:deep(.el-drawer__header .head-name) {
  font-weight: 500;
  font-size: 20px;
  color: #252525;
}
:deep(.layout) {
  flex-direction: row;
  align-items: center;
}
:deep(.layout .upload_info) {
  margin-left: 12px;
}
</style>